<template>
    <view>
        <view class="uni-list">
            <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value, key) in listData" :key="key" @click="goDetail(value)">
				<view class="uni-media-list">
					<view class="uni-media-list-text-top">{{ value.theme }}</view>
                    <image class="uni-media-list-logo" :src="'https://xxgc-lin-blog.oss-cn-chengdu.aliyuncs.com/'+value.picture"></image>
                    <view class="uni-media-list-body">
                        <view class="uni-media-list-text-bottom">
                            <text class="publisher"></text>
                            <text class="uni-list-data">{{ value.createTime }}</text>
                        </view>
                    </view>
                </view>
				<!-- </navigator> -->
            </view>
        </view>
    </view>
</template>

<script>
	import newsApi from '../../api/newsApi';
    export default {
        data() {
            return {
                listData: [],
            };
        },
        onLoad() {
			console.log("准备新闻渲染")
			newsApi.getNews({
				pageNum:1,
				pageSize:100
			}).then((res)=>{
				this.listData=res.data.records
			})
        },
        methods: {
            goDetail: function(e) {
                let detail = {
                    author_name: e.content,
                    cover:'https://xxgc-lin-blog.oss-cn-chengdu.aliyuncs.com/'+e.picture,
                    id: e.id,
                    published_at: e.createTime,
                    title: e.theme
                };
                uni.navigateTo({
                    url: '/pages/newsDetails/newsDetails?detailDate=' + encodeURIComponent(JSON.stringify(detail))
                });
            },
        }
    };
</script>
<style>
	.uni-list{
		padding: 20px;
		margin-bottom: 150px;
	}
	.uni-list-cell{
		background-color: azure;
		margin-top: 20rpx;
	}
    .uni-media-list-logo {
        width: 90%;
        height: 300rpx;
		margin-left: 5%;
		border-radius: 5px 5px 5px 5px ;
		position: relative;
    }

    .uni-media-list-body {
        height: auto;
        justify-content: space-around;
    }

    .uni-media-list-text-top {
		width: 310px;
        height: 74upx;
        font-size: 28upx;
        overflow: hidden;
		margin-left: 20px;
		position: absolute;
		bottom: 10%;
		z-index: 100;
		color: ghostwhite;
		white-space: nowrap;
    }

    .uni-media-list-text-bottom {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
	.uni-media-list{
		/* border: 1px black solid; */
		border-radius: 5px 5px 5px 5px ;
		background-color: white;
		margin-bottom: 20px;
		position: relative;
		
	}
	.publisher{
		margin-left: 26px;
		font-size: 20px;
		color: deepskyblue;
		font-weight: 600;
	}
	.uni-list-data{
		font-size: 10px;
		color: darkgray;
		position: relative;
		right: 15px;
		top: 5px;
	}
</style>